<template>
  <view class="index-box">
    <!-- #ifdef  MP -->
    <!-- 搜索框在小程序中显示  @click="navTo('/pages/search/search')" 点击的时候跳转 -->
    <!-- 保留原生的click 就要触发 @click.native -->
    <search-input @click.native="navTo('/pages/search/search')"></search-input>
    <!-- #endif -->

    <!-- 轮播图 -->
    <lunbo :bannerList="bannerList"></lunbo>

    <!-- // @init="mescrollInit" @down="downCallback" @up="upCallback"为固定值,不可删改(与mescroll-mixins保持一致)
			:down="downOption" :up="upOption" 绝大部分情况无需配置
			:top="顶部偏移量" :bottom="底部偏移量" :topbar="状态栏" :safearea="安全区" (常用)
			字节跳动小程序 ref="mescrollRef" 必须配置
			此处支持写入原生组件 -->
    <!-- <button @click="hanlder">按钮sad</button> -->
    <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">

      <!-- 分类区域 -->
      <category-box :categoryList="categoryList"></category-box>

      <!-- 热门推荐 -->
      <view class="list-container">

        <swiper-course name="热门推荐" word="hot" :params="{sort:'hot'}" :courseData="hotCouseList"></swiper-course>
        <scroll-course name="近期上新" word="NEW" :params="{sort:'new'}" :courseData="newCourseList"></scroll-course>
        <swiper-course name="免费精选" word="FREE" :params="{isFree:1}" :courseData="freeCouseList"></swiper-course>
        <list-course name="付费精品" word="NICE" :params="{isFree:0}" :courseData="payCourseList"></list-course>
      </view>

    </mescroll-body>
  </view>
</template>




<script>
// 引入mescroll-mixins.js  下拉刷新
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js"
// Api 
import api from '@/api/course.js'
// 付费精品
import listCourse from './components/list-course.vue'
// 近期上新
import scrollCourse from './components/scroll-coures.vue'
//轮播图
import lunbo from '@/components/common/lunbo.vue'
//分类
import categoryBox from './components/category-box.vue'
//热门推荐
import swiperCourse from './components/swiper-course.vue'
//搜索框
import searchInput from '@/components/common/search-input.vue'
export default {
  mixins: [MescrollMixin], // 使用mixin
  components: {
    searchInput,
    lunbo,
    categoryBox,
    swiperCourse,
    scrollCourse,
    listCourse
  },
  data () {
    return {
      bannerList: [],
      categoryList: [],
      hotCouseList: [],
      freeCouseList: [],
      newCourseList: [],
      payCourseList: [],
      downOption: {//下拉刷新
        offset: 50, //在列表顶部,下拉大于50px,松手即可触发下拉刷新的回调
        textLoading: '请稍等在加载中', //加载text
      },
      upOption: { //上拉回调
        page: {
          num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
          size: 10, // 每页数据的数量
          time: null // 加载第一页数据服务器返回的时间; 防止用户翻页时,后台新增了数据从而导致下一页数据重复;  超时时间
        },
        textNoMore: '-- 已经到底部了 --'
      }

    }
  },

  // 监听原生标题栏按钮点击事件，参数为Object
  onNavigationBarButtonTap (e) {
    // console.log(e)//这里点击log会有一个控制台里面的index 就是索引 看是第几个按钮
    // 点击第1个按钮  
    if (e.index === 0) {
      //打开扫一扫功能
      uni.scanCode({
        success: (res) => {
          // console.log('条码类型：' + res.scanType);
          // console.log('条码内容：' + res.result);
          uni.navigateTo({ //跳转页面
            url: `/pages/public/web-view?url=${res.result}`
          })
        },
        fail: () => {
          uni.showModal({ //提示框
            title: '扫码失败',
            icon: ""
          })
        }
      });
    }
  },

  // onPullDownRefresh() { //原生态的下拉刷新生命周期钩子

  // 	setTimeout(() => {
  // 		//结束下拉刷新
  // 		uni.stopPullDownRefresh();
  // 	}, 1000);
  // },

  onNavigationBarSearchInputClicked () {
    // console.log('点击原生搜索框')
    //跳转到搜索页
    // uni.navigateTo({
    // 	url:'/pages/search/search',
    // })
    this.navTo('/pages/search/search')
  },

  onLoad () {
    // // #ifdef APP-PLUS
    // this.placeholderData()
    // // #endif
  },

  methods: {
    hanlder () {

      uni.navigateTo({
        url: '/pages/demo/demo'
      })
      console.log('????')
    },

    //搜索框提示内容
    placeholderData () {
      // 获取当前页面实例
      const Webview = this.$scope.$getAppWebview();
      // 搜索框提示内容定时从数组中获取

      let arr = ['App ', '小程序', '鲜柚生活', '魔法阿么']
      // 加载页面就调用第一次
      let i = 0
      Webview.setStyle({
        "titleNView": {
          "searchInput": {
            "placeholder": arr[i]
          }
        }
      })

      const len = arr.length - 1
      setInterval(() => {
        // 第二次  就是下标1  每次+1  如果到达 最后一个元素 ,  则重新从0 开始
        i = i < len ? ++i : 0
        Webview.setStyle({
          "titleNView": {
            "searchInput": {
              "placeholder": arr[i]
            }
          }
        })
      }, 3000)


    },

    //查询轮播图数据
    async loadBannerData () {
      const {
        data,
        code
      } = await api.getAdvertList(1)
      this.bannerList = data

      const bb = ['#1dbbff', '#97e4ff', '#0072B7']

      data.map((item, index) => {
        item["background"] = bb[index%3] 
      })
      // "background|+1": ['#006C00', '#45328c', '#0072B7'], //背景色
      // console.log('数据格式',data)
    },

    // 查询分类数据
    async ladCateData () {
      const {
        data
      } = await api.getCategoryList()
      // console.log('分类数据', data)
      this.categoryList = data
    },
    //查询热门推荐数据
    async loadHotCourseData () {
      const {
        data
      } = await api.getList({
        sort: 'hot'   //传递字符串 api 里面有一个 条件数组query
      }, 1, 8)
      this.hotCouseList = data.records
      // console.log('hotCouseList', data)
    },

    //免费
    async loadFreeData () {
      //0是收费  1是免费
      const {
        data
      } = await api.getList({
        isFree: 1
      }, 1, 8)
      this.freeCouseList = data.records
    },
    //近期上新
    async loadNewCourseData () {
      const {
        data
      } = await api.getList({
        sort: 'NEW'
      }, 1, 8)
      this.newCourseList = data.records
    },

    /*下拉刷新的回调, 有3种处理方式:*/
    // downCallback(){
    // 	console.log('下拉刷新')
    // },
    /*上拉加载的回调*/
    async upCallback (page) {
      let pageNum = page.num; // 当前页码, 默认从1开始
      let pageSize = page.size; // 每页显示多少条数据, 默认每页10条
      // console.log('上啦回调1',page.num)
      if (page.num === 1) { //如果是第一页，则是下拉刷新
        //查询数据
        this.loadBannerData()
        this.ladCateData()
        this.loadHotCourseData()
        this.loadNewCourseData()
        this.loadFreeData()
      }

      //分页查询付费的列表

      //0是收费  1是免费
      const {
        data
      } = await api.getList({
        isFree: 0  //isFree  是status  0为false 1 为true
      }, page.num, page.size)

      const curList = data.records
      // 判断是否第一页,是则将原付费数据清空
      if (page.num === 1) this.payCourseList = []
      //如果不是 追加新的数据
      this.payCourseList = this.payCourseList.concat(curList)   //concat是合并数组

      //请求成功 。隐藏加载状态
      this.mescroll.endBySize(curList.length, data.total);

    }

  }

}
</script>

<style>
.list-container {
  padding: 0 30rpx;
}
</style>
